<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Demo Page for jQuery UI selectmenu</title>

	<link type="text/css" href="../../themes/base/jquery.ui.core.css" rel="stylesheet" />
	<link type="text/css" href="../../themes/base/jquery.ui.theme.css" rel="stylesheet" />
	<link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.8.2.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>

	<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>

	<style type="text/css">
		/* demo styles */
		body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
		fieldset { border:0; }
		label,select,.ui-select-menu { float: left; margin-right: 10px; }
		select { width: 200px; }
		.wrap ul.ui-selectmenu-menu-popup li a { font-weight: bold; }
	</style>
	<script type="text/javascript">
		$(function(){
			$('select#speedA').selectmenu({style:'popup'});

			$('select#speedAa').selectmenu({
				style:'popup',
				maxHeight: 150
			});
			$('select#speedAa').selectmenu("widget").addClass("wrap");

			$('select#speedB').selectmenu({
				style:'popup',
				width: 300,
				format: addressFormatting
			});

			$('select#speedC').selectmenu();

			$('select#speedD').selectmenu({
				menuWidth: 400,
				format: addressFormatting
			});

			$('select#filesC').selectmenu({
				style:'popup',
				positionOptions: {
					my: "left center",
					at: "right center",
					offset: "10 0"
				}
			});
		});

		//a custom format option callback
		var addressFormatting = function(text, opt){
			var newText = text;
			//array of find replaces
			var findreps = [
				{find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
				{find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
				{find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
				{find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
				{find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
			];

			for(var i in findreps){
				newText = newText.replace(findreps[i].find, findreps[i].rep);
			}
			return newText;
		}
	</script>
</head>
<body>
	<br />
	<br />
	<form action="#">
		<h2>"default popup" Style</h2>
		<fieldset>
			<label for="speedA">Select a Speed:</label>
			<select name="speedA" id="speedA">
				<option value="Slower">Slower</option>
				<option value="Slow" selected="selected">Slow</option>
				<option value="Medium">Medium</option>
				<option value="Fast">Fast</option>
				<option value="Faster">Faster</option>
			</select>
		</fieldset>
		<h2>"default popup" Style with maxHeight set and custom wrapper</h2>
		<fieldset>
			<label for="speedAa">Select a Speed:</label>
			<select name="speedAa" id="speedAa">
				<option value="Slower">-6 Slower</option>
				<option value="Slower">-5 Slower</option>
				<option value="Slower">-4 Slower</option>
				<option value="Slow">-3 Slow</option>
				<option value="Slow">-2 Slow</option>
				<option value="Slow">-1 Slow</option>
				<option value="Medium" selected="selected">0 Medium</option>
				<option value="Fast">1 Fast</option>
				<option value="Fast">2 Fast</option>
				<option value="Fast">3 Fast</option>
				<option value="Faster">4 Faster</option>
				<option value="Faster">5 Faster</option>
				<option value="Faster">6 Faster</option>
			</select>
		</fieldset>

		<h2>Same with option text formatting</h2>
		<fieldset>
			<label for="speedB">Select an Address:</label>
			<select name="speedB" id="speedB">
				<option>John Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 assasasasasasass | asasasasasasasasasas(footer text)</option>
				<option selected="selected">Jane Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
				<option>Joseph Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
				<option>Mad Doe Kiiid - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
			</select>
		</fieldset>

		<h2>"dropdown" Style</h2>
		<fieldset>
			<label for="speedC">Select a Speed:</label>
			<select name="speedC" id="speedC">
				<option value="Slower" class="whoo">Slower</option>
				<option value="Slow">Slow</option>
				<option value="Medium" selected="selected">Medium</option>
				<option value="Fast">Fast</option>
				<option value="Faster">Faster</option>
			</select>
		</fieldset>

		<h2>"dropdown" Style with menuWidth wider than menu and text formatting</h2>
		<fieldset>
			<label for="speedD">Select an Address:</label>
			<select name="speedD" id="speedD">
				<option>John Doe - 78 West Main St Apt 3A aasasasasas, Bloomsburg, PA 12345</option>
				<option>Jane Doe - 78 West Main St Apt 3A, Bloomsburg, PA 12345</option>
				<option selected="selected">Joseph Doe - 78 West Main St Apt 3A, Bloomsburg, PA 12345</option>
				<option>Mad Doe Kiiid - 78 West Main St Apt 3A, Bloomsburg, PA 12345</option>
			</select>
		</fieldset>

		<h2>"popup" Style with custom positioning and optgroups</h2>		<fieldset>
			<label for="filesC">Select a File:</label>
			<select name="filesC" id="filesC">
				<optgroup label="scripts">
					<option value="jquery">jQuery.js</option>
					<option value="jqueryui">ui.jQuery.js</option>
				</optgroup>
				<optgroup label="Label with space">
					<option value="somefile">Some unknown file</option>
					<option value="someotherfile">Some other file</option>
				</optgroup>
			</select>
		</fieldset>
	</form>
</body>
</html>